<template>
	<view class="bg-white vw-100 vh-100 text-lg" style="position: fixed; top: 0; left: 0; z-index: 100; padding-top: 120px;">

		<view style="height: 60px;" class="flex justify-start align-center padding-left">请选择地址</view>
		
		<scroll-view scroll-y style="height: calc(100vh - 240px);" class="">
			<view class="margin-top-sm">
				<view class="padding bg-main text-white flex justify-between align-center">
					<text>省：</text>
					<text @tap="showSheng">
						<text v-if="md.pcode">{{locamap.cmap[md.pcode].criname}}</text>
						<text v-else>未选择</text>
						<text v-if="shengListFlg" class="cuIcon-unfold"></text>
						<text v-else class="cuIcon-right"></text>
					</text>
				</view>
				<view v-show="shengListFlg" class="">
					<view class="padding solid-bottom" v-for="(pcode, index) in shengs" :key="pcode">
						<view @tap="pcodeSelect(pcode)" class=" flex justify-between align-center">
							<text>{{locamap.cmap[pcode].criname}}</text>
							<text class="text-main">
								<text v-if="md.pcode == pcode" class="cuIcon-roundcheckfill"></text>
								<text v-else class="cuIcon-round"></text>
							</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="margin-top-sm">
				<view class="padding bg-main text-white flex justify-between align-center">
					<text>市：</text>
					<text @tap="showShi">
						<text v-if="md.scode">{{locamap.cmap[md.scode].criname}}</text>
						<text v-else>未选择</text>
						<text v-if="shiListFlg" class="cuIcon-unfold"></text>
						<text v-else class="cuIcon-right"></text>
					</text>
				</view>
				<view v-show="shiListFlg" class="">
					<view class="padding solid-bottom" v-for="(scode, index) in shis" :key="scode">
						<view @tap="scodeSelect(scode)" class=" flex justify-between align-center">
							<text>{{locamap.cmap[scode].criname}}</text>
							<text class="text-main">
								<text v-if="md.scode == scode" class="cuIcon-roundcheckfill"></text>
								<text v-else class="cuIcon-round"></text>
							</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="margin-top-sm">
				<view class="padding bg-main text-white flex justify-between align-center">
					<text>市：</text>
					<text @tap="showQu">
						<text v-if="md.qcode">{{locamap.cmap[md.qcode].criname}}</text>
						<text v-else>未选择</text>
						<text v-if="quListFlg" class="cuIcon-unfold"></text>
						<text v-else class="cuIcon-right"></text>
					</text>
				</view>
				<view v-show="quListFlg" class="">
					<view class="padding solid-bottom" v-for="(qcode, index) in qus" :key="qcode">
						<view @tap="qcodeSelect(qcode)" class=" flex justify-between align-center">
							<text>{{locamap.cmap[qcode].criname}}</text>
							<text class="text-main">
								<text v-if="md.qcode == qcode" class="cuIcon-roundcheckfill"></text>
								<text v-else class="cuIcon-round"></text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		
		<view style="height: 60px;" class=" flex justify-around align-center">
			<button class="bg-red round" size="mini" @tap="cancel">取消</button>
			<button class="bg-main round" size="mini" v-if="md.pcode && md.scode && md.qcode" @tap="confirm">确认选择</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			astore: {
				type: Object,
				default: function() {
					return {
						storeid: undefined,
						sname: undefined,
						jd: undefined,
						wd: undefined,
						pcode: undefined,
						scode: undefined,
						qcode: undefined,
						address: undefined
					};
				}
			},
		},
		data() {
			return {
				md: {
					pcode: "",
					scode: "",
					qcode: "",
				},
				locamap: {},
				shengs: [],
				shis: [],
				qus: [],
				shengListFlg: true,
				shiListFlg: true,
				quListFlg: true,
			}
		},
		created: function() {
			this.md = this.astore;
			this.locamap = this.location.localmap;
			this.loadSheng();
		},
		methods: {
			showSheng: function() {
				this.shengListFlg = !this.shengListFlg;
			},
			showShi: function() {
				this.shiListFlg = !this.shiListFlg;
			},
			showQu: function() {
				this.quListFlg = !this.quListFlg;
			},
			pcodeSelect: function(pcode) {
				this.md.pcode = pcode;
				this.md.scode = "";
				this.md.qcode = "";
				this.shengListFlg = false;
				this.$forceUpdate();
				this.loadShi(pcode);
			},
			scodeSelect: function(scode) {
				this.md.scode = scode;
				this.md.qcode = "";
				this.shiListFlg = false;
				this.$forceUpdate();
				this.loadQu(scode);
			},
			qcodeSelect: function(qcode) {
				this.md.qcode = qcode;
				this.quListFlg = false;
				this.$forceUpdate();
			},
			loadSheng: function() {
				this.shengs = this.locamap.subs["000000"];
			},
			loadShi: function(pcode) {
				this.shis = this.locamap.subs[pcode];
			},
			loadQu: function(scode) {
				this.qus = this.locamap.subs[scode];
			},
			confirm: function() {
				this.$emit("change", this.md);
			},
			cancel: function() {
				this.$emit("close");
			}
		}
	}
</script>

<style scoped>
	.vw-100 {
		width: 100vw;
	}

	.vh-100 {
		height: 100vh;
	}
	
	.vh-70 {
		height: 70vh;
	}
	.vh-30 {
		height: 30vh;
	}
</style>